<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div{
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background: url('渲染优化测试.png');
      background-size: 100%;
    }

    @keyframes byPos
    {
      0%   {
        top: 0;
        left: 0;
      }
      25%  {
        top: 0;
        left: 200px;
      }
      50%  {
        top: 200px;
        left: 200px;
      }
      75% {
        top: 200px;
        left:0;
      }
    }

    @keyframes byTranslate
    {
      0%   {
        transform: translate(0,0);
      }
      25%  {
        transform: translate(0,200px);
      }
      50%  {
        transform: translate(200px,200px);
      }
      75% {
        transform: translate(200px,0);
      }
    }
    
    .runBall{
      /* 动画每次运行4s,无限循环 */
      /* 直接调整位置，会引起反复重排重绘，性能低：
      18.1 ms 0.1 ms	0.1 ms	Recalculate Style
      18.2 ms 0.1 ms	0.1 ms	Layout（重排）
      18.4 ms 0.2 ms	0.2 ms  Update Layer Tree
      18.5 ms 0.1 ms	0.1 ms	Paint（重绘）
      18.8 ms 0.2 ms	0.2 ms	Composite Layers
      44.8 ms 0.3 ms	0.3 ms	Recalculate Style
      45.1 ms 0.1 ms	0.1 ms	Layout（重排）
      45.8 ms 0.2 ms	0.2 ms	Paint（重绘）
      46.4 ms 0.2 ms	0.2 ms	Composite Layers
      61.7 ms 0.2 ms	0.2 ms	Recalculate Style
      61.9 ms 0.2 ms	0.2 ms	Layout（重排）
      62.1 ms 0.3 ms	0.3 ms	Update Layer Tree
      62.5 ms 0.2 ms	0.2 ms	Paint（重绘）
      62.9 ms 0.2 ms	0.2 ms	Composite Layers 
      ...
      */
      /* animation: byPos 4s infinite; */

      /* 使用transform: translate，会创建新层，只在初次加载时重排重绘，通过GPU硬件加速实现动画，高效
      1823.6 ms 1.9 ms	1.9 ms	Recalculate Style
      1827.9 ms 0.2 ms	0.3 ms	Layout（重排）
      1847.8 ms 0.6 ms	0.6 ms	Update Layer Tree
      1848.4 ms 0.1 ms	0.1 ms	Paint（重绘）
      1848.5 ms 0.0 ms	0.0 ms	Paint（重绘）
      1849.1 ms 0.3 ms	0.3 ms	Composite Layers
      1864.0 ms 0.3 ms	0.3 ms	Recalculate Style
      1864.4 ms 0.2 ms	0.2 ms	Update Layer Tree
      1864.7 ms 0.1 ms	0.1 ms	Composite Layers
      2714.1 ms 0.3 ms	0.3 ms	Recalculate Style
      2714.4 ms 0.1 ms	0.1 ms	Update Layer Tree
      2714.5 ms 0.0 ms	0.0 ms	Hit Test
      2714.7 ms 0.1 ms	0.1 ms	Update Layer Tree
      2714.8 ms 0.0 ms	0.0 ms	Composite Layers
       */
      animation: byTranslate 4s infinite;
    }


  </style>
</head>
<body>
  <div class="runBall">
    
  </div>
  <!-- <div>
    translate
  </div> -->
</body>
</html>